<ion-header>
  <ion-navbar color="dark">
    <ion-title style="float: left;margin-left: 43%">
      运动
    </ion-title>
    <ion-icon name="md-add" style="color: white;float: right;margin-right:5px" (click)="openPublishSport()"></ion-icon>
  </ion-navbar>

</ion-header>

<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="下拉刷新"
      refreshingSpinner="circles"
      refreshingText="正在刷新...">
    </ion-refresher-content>
  </ion-refresher>

  <ion-item>
    <ion-select okText="确定" cancelText="取消" interface="action-sheet" style="margin-left: 10px;">
      <ion-option value="01">北京</ion-option>
      <ion-option value="02">成都</ion-option>
      <ion-option value="03" selected="true">雅安</ion-option>
    </ion-select>
    <ion-select okText="确定" [(ngModel)]="sportTypeId"  (ngModelChange)="select()"  cancelText="取消" interface="action-sheet" style="margin-left: 8%">
      <ion-option value="1">跑步</ion-option>
      <ion-option value="2">游泳</ion-option>
      <ion-option value="3">登山</ion-option>
      <ion-option value="4">散步</ion-option>
      <ion-option value="5">球类</ion-option>
      <ion-option value="6">自驾</ion-option>
      <ion-option value="7">骑行</ion-option>
      <ion-option value="8">其他</ion-option>
      <ion-option [selected]="true" value="10">全部</ion-option>
    </ion-select>
    <ion-select okText="确定" [(ngModel)]="sortCondition" (ngModelChange)="select()" cancelText="取消" interface="action-sheet" style="margin-left: 8%">
      <ion-option value="1">人气最高</ion-option>
      <ion-option value="2">时间最早</ion-option>
      <ion-option value="10" [selected]="true">默认排序</ion-option>
    </ion-select>
  </ion-item>


    <ion-label *ngIf="sportListIsNull" text-center="">暂无任何活动</ion-label>


  <ion-card *ngFor="let sport of sportList" style="margin: 5px 0 0 0;width: 100%" (click)="goToSportDetail(sport.id)">
    <!--左侧活动类型图标-->
    <div class="sport_left">
      <img src="{{localSportTypeImgPath}}{{sport.sportTypeImg}}" class="sport_type_img">
      <span *ngIf="sport.sportFlag==0" class="note_end">已结束</span>
    </div>
    <div class="sport_right">
      <!--活动标题-->
      <div class="sport_title">{{sport.pubSportTitle}}</div>
      <!--开始时间-->
      <div class="condition">
        <img src="{{localSportTypeImgPath}}starttime.jpg" class="type_img">
        <span>{{sport.sportStartDatetime}}({{sport.sportStartWeek}})</span>
      </div>
      <!--结束时间-->
      <div class="condition">
        <img src="{{localSportTypeImgPath}}endtime.jpg" class="type_img">
        <span>{{sport.sportEndDatetime}}({{sport.sportEndWeek}})</span>
      </div>
      <!--地点-->
      <div class="condition">
        <img src="{{localSportTypeImgPath}}location.png" class="type_img">
        <span>{{sport.pubSportPlace}}</span>
      </div>
      <!--右侧分割线-->
      <hr width="95%" size="1px" style="color:#8e9093">
      <!--右侧灰色图标1-->
      <div class="small_img_div">
        <img src="{{localSportTypeImgPath}}person.png" class="type_img">
        <span>{{sport.sportRealJoinPersonNum}}</span>
      </div>
      <!--右侧灰色图标2-->
      <div class="small_img_div">
        <img src="{{localSportTypeImgPath}}discuss.png" class="type_img">
        <span>{{sport.discussNum}}</span>
      </div>
      <!--右侧灰色图标3-->
      <div class="small_img_div">
        <img src="{{localSportTypeImgPath}}browse.png" class="type_img">
        <span>{{sport.browseNum}}</span>
      </div>
    </div>


  </ion-card>

  <!--</ion-list>-->
  <p *ngIf="isLoadEnd" text-center="">{{lastNote}}</p>


  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="加载更多数据...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

